<template>
  <view class="container">
    <view class="smart-form">
      <uni-section title="预约记录" type="line">
        <view class="list-view">
          <view class="item" v-for="item in list" :key="item.reservationId"
                @click="goToDetail(item.reservationId)">
            <view class="item-header">
              <view class="item-header-content">
                <view class="item-title"> {{ item.enterpriseName }} </view>
              </view>
            </view>

            <view class="item-body">
              <view class="item-top-item">
                <view class="item-top-label"> 预约人： </view>
                <view class="item-title"> {{ item.reservationUser }} </view>
                <view class="item-state">
                  <view class="tag" :class="getTagClass(item.reservationState)">
                    {{ getDictLabel(reservationStateList, item.reservationState) }}
                  </view>
                </view>
              </view>
              <view class="item-top-item">
                <view class="item-top-label"> 预约电话： </view>
                <view class="item-title"> {{ item.reservationPhone }} </view>
              </view>
              <view class="item-top-item">
                <view class="item-top-label"> 预约类型： </view>
                <view class="item-title"> {{ getDictLabel(reservationTypeList, item.reservationType) }} </view>
              </view>
              <view class="item-top-item">
                <view class="item-top-label"> 预约时间： </view>
                <view class="item-title"> {{ item.reservationTime }} </view>
              </view>
            </view>

            <view class="item-footer">
              <view class="footer-button confirm-btn" @click.stop="confirmReservation(item.reservationId)">
                确认预约
              </view>
              <view class="footer-button reject-btn" @click.stop="rejectReservation(item.reservationId)">
                拒绝预约
              </view>
              <view class="footer-button verify-btn" @click.stop="verifyReservation(item.reservationId)">
                核销预约
              </view>
            </view>
          </view>
        </view>
      </uni-section>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { reservationApi } from '@/api/business/oa/reservation-api';
  import { smartSentry } from '@/lib/smart-sentry';
  import { SmartLoading, SmartToast } from '@/lib/smart-support';
  import { dictApi } from "@/api/support/dict-api";
  import { useRouter } from 'vue-router';

  const router = useRouter();
  const list = ref([]);
  const reservationTypeList = ref([]);
  const reservationStateList = ref([]);

  // 查询预约类型字典数据
  async function queryReservationTypeDict() {
    try {
      let res = await dictApi.getDictDataListByCode("SUPPLIER_TYPE");
      reservationTypeList.value = res.data.map((e) => ({
        label: e.dataLabel,
        value: e.dataValue
      }));
    } catch (error) {
      smartSentry.captureError(error);
    }
  }

  // 查询预约状态字典数据
  async function queryReservationStateDict() {
    try {
      let res = await dictApi.getDictDataListByCode("RESERVATION_STATE");
      reservationStateList.value = res.data.map((e) => ({
        label: e.dataLabel,
        value: e.dataValue
      }));
    } catch (error) {
      smartSentry.captureError(error);
    }
  }

  // 获取字典标签
  function getDictLabel(dictList, value) {
    const dict = dictList.find(item => item.value === value);
    return dict ? dict.label : value;
  }

  // 根据预约状态返回对应的标签样式类
  function getTagClass(state) {
    const stateLabel = getDictLabel(reservationStateList.value, state);
    switch (stateLabel) {
      case '等待确认':
        return 'waiting';
      case '预约成功':
        return 'success';
      case '预约过期':
        return 'expired';
      case '预约取消':
        return 'cancelled';
      case '预约核销':
        return 'verified';
      default:
        return 'default';
    }
  }

  // 跳转到详情页
  function goToDetail(reservationId) {
    router.push(`/pages/reservation/reservation-detail?reservationId=${reservationId}`);
  }

  // 确认预约
  async function confirmReservation(reservationId) {
    SmartLoading.show();
    try {
      await reservationApi.confirm(reservationId);
      SmartToast.success('确认预约成功');
      loadData(); // 重新加载数据以更新状态
    } catch (error) {
      smartSentry.captureError(error);
      SmartToast.fail('确认预约失败');
    } finally {
      SmartLoading.hide();
    }
  }

  // 拒绝预约
  async function rejectReservation(reservationId) {
    SmartLoading.show();
    try {
      await reservationApi.reject(reservationId);
      SmartToast.success('拒绝预约成功');
      loadData(); // 重新加载数据以更新状态
    } catch (error) {
      smartSentry.captureError(error);
      SmartToast.fail('拒绝预约失败');
    } finally {
      SmartLoading.hide();
    }
  }

  // 核销预约
  async function verifyReservation(reservationId) {
    SmartLoading.show();
    try {
      await reservationApi.verify(reservationId);
      SmartToast.success('核销预约成功');
      loadData(); // 重新加载数据以更新状态
    } catch (error) {
      smartSentry.captureError(error);
      SmartToast.fail('核销预约失败');
    } finally {
      SmartLoading.hide();
    }
  }

  const loadData = async function () {
    SmartLoading.show();
    try {
      const res = await reservationApi.pageQuery({ pageNum: 1, pageSize: 500 });
      list.value = res.data.list;
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      SmartLoading.hide();
    }
  };

  // 初始化时加载数据和字典项
  loadData();
  queryReservationTypeDict();
  queryReservationStateDict();
</script>

<style lang="scss" scoped>
  .container {
    background-color: #f5f6f8;
    min-height: 100vh;
  }

  .smart-form {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 15rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  }

  .list-view {
    margin: 20rpx 6rpx; /* 进一步减小左右边距 */
  }

  .item {
    box-sizing: border-box;
    width: 100%;
    background: #efefef;
    border-radius: 12rpx;
    box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
    margin-bottom: 30rpx;
    overflow: hidden;
    border-top: 1rpx solid #ededed; /* 添加上边框线 */

    .item-header {
      padding: 24rpx 30rpx 16rpx 30rpx;
      border-bottom: 1rpx solid #ededed;

      .item-header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item-title {
          font-size: 32rpx;
          color: #323333;
          font-weight: bold;
        }
      }
    }

    .item-body {
      padding: 16rpx 30rpx 20rpx 30rpx;

      .item-top-item {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .item-top-label {
        width: 168rpx;
        margin-right: 10rpx;
        font-size: 28rpx;
        color: #777777;
      }

      .item-title {
        font-size: 28rpx;
        color: #323333;
        font-weight: bold;
        flex: 1;
      }

      .item-state {
        display: flex;
        justify-content: flex-end;
        .tag {
          width: 112rpx;
          height: 40rpx;
          border-radius: 4rpx;
          text-align: center;
          line-height: 40rpx;
          font-size: 24rpx;
          padding: 0 10rpx;

          &.waiting {
            color: #1a9aff;
            background: #f2f9ff;
          }

          &.success {
            color: #4caf50;
            background: #edf7ed;
          }

          &.expired {
            color: #9e9e9e;
            background: #f5f5f5;
          }

          &.cancelled {
            color: #f44336;
            background: #ffebee;
          }

          &.verified {
            color: #9c27b0;
            background: #f3e5f5;
          }
        }
      }
    }

    .item-sub-title {
      font-size: 28rpx;
      color: #777777;
      margin-bottom: 10rpx;
      &:last-child {
        padding-bottom: 20rpx;
        margin-bottom: 0;
      }
    }

    .order-end-time {
      height: 40rpx;
      background: #ff6c00;
      box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
      color: #fff;
      text-align: center;
      font-size: 24rpx;
      line-height: 40rpx;
    }
  }

  .item-footer {
    height: 120rpx;
    display: flex;
    border-top: 1rpx dashed #ccc;
    align-items: center;
    justify-content: space-between;
    margin: 0 30rpx;

    .footer-button {
      flex: 1;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8rpx;
      font-size: 28rpx;
      font-weight: bold;
      margin: 0 10rpx;

      &.confirm-btn {
        background: #4caf50;
        color: white;
      }

      &.reject-btn {
        background: #f44336;
        color: white;
      }

      &.verify-btn {
        background: #1a9aff;
        color: white;
      }
    }
  }
</style>
